$prefixCls: admin-circular;

@mixin orientation() {
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.#{$prefixCls} {
  position: relative;
  border-radius: 50%;
  width: 100%;
  height: 100%;

  &-content {
    @include orientation;
    width: 90%;
    height: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 199;
  }

  &-svg {
    @include orientation;
    width: 105%;
    height: 105%;
    border-radius: 0%;
    z-index: 299;
  }

  &-mask {
    @include orientation;
    width: 100%;
    height: 100%;
  }

  &-reticule {
    width: 100%;
    height: 100%;
    @include orientation;

    span {
      height: 100%;
      width: 1px;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      display: block;
    }
  }

  .#{$prefixCls}-reticule-mask {
    @include orientation;
    width: 92%;
    height: 92%;
    background-color: #fff;
    z-index: 99;
  }
}